<template>
  <div class="page-search">
    <hSearch
      v-bind="props.searchformConfig"
      v-model="formData"
      @handleQuery="handleQuery"
      @handleQueryClick="handleQueryClick"
      :colLayout="colLayout"
      :flexWrap="flexWrap"
    >
      <template #footer>
        <div class="search-btn">
          <el-button type="primary" :icon="Search" @click="handleQueryClick">
            搜索
          </el-button>
          <el-button
            type="default"
            :icon="RefreshLeft"
            @click="handleResetClick"
          >
            重置
          </el-button>
        </div>
      </template>
    </hSearch>
  </div>
</template>
    
<script setup lang="ts">
import hSearch from './form.vue'
import { Search, RefreshLeft } from '@element-plus/icons-vue'
import { ref } from 'vue'
const emits = defineEmits([
  'handleQueryClick',
  'handleResetClick',
  'handleQuery',
])
// 基础配置
const props = defineProps({
  searchformConfig: {
    type: Object,
    required: true,
  },
  colLayout: {
    type: Object,
  },
  flexWrap: {
    type: Boolean,
  },
})
// 获取数据：
const formItems = props.searchformConfig.formItems ?? []
// 对数据进行初始化
const formOriginData = {}
for (const item of formItems) {
  formOriginData[item.field] = ''
}
// 把初始化的数据进行赋值
const formData = ref(formOriginData)

// 重置按钮方法
const handleResetClick = () => {
  // 根据form 组件的双向绑定 进行重置数据
  for (const key in formOriginData) {
    // 办法一
    formData.value[`${key}`] = formOriginData[key]
    // 办法二
    // formData.value = formOriginData;
  }
  emits('handleResetClick')
}
// 搜索按钮事件
const handleQueryClick = () => {
  emits('handleQueryClick', formData.value)
}
// 搜索按钮事件
const handleQuery = (e) => {
  emits('handleQuery', e)
}

// 暴露方法
defineExpose({
  handleQueryClick,
  handleResetClick,
})
</script>
    
<style scoped lang="scss">
.page-search {
  padding-bottom: 10px;
}
.search-btn {
  text-align: right;
  // padding: 5px;
}
</style>
